<template>
  <span ref="text" class="msg text-[#f0f9ff]"></span>
</template>

<script setup>

import {ref, onMounted} from "vue";
import TypeIt from 'typeit'

const props = defineProps({
  text: String
})
const text = ref(null)
onMounted(() => {
  new (TypeIt)(text.value, {
    strings: props.text,
    cursorChar: "<span class='cursorChar'>|<span>",//用于光标的字符。HTML也可以
    speed: 150,
    lifeLike: true,// 使打字速度不规则
    cursor: true,//在字符串末尾显示闪烁的光标
    breakLines: true,// 控制是将多个字符串打印在彼此之上，还是删除这些字符串并相互替换
    loop: true,//是否循环
  }).go()
})
</script>

<style lang='scss' scoped>
.msg {
  letter-spacing: 2px;

  :v-deep(.cursorChar) {
    display: inline-block;
    margin-left: 2px;

  }
}
</style>
